<template>
  <div class="buttonBox">
    <el-button v-loading="dataLoading" size="small" :disabled="dataLoading" @click="getIntelligenceList"><i class="iconfont orderIco mr5" />客户资质({{ orderIntelligenceTotal }})</el-button>
    <!-- 订单客户资质---dialog  -->
    <el-dialog
      title="订单客户资质"
      :visible.sync="isOrderCusZhiZi"
      :close-on-click-modal="false"
      append-to-body
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <div v-show="!isDisable" class="plop flex">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="newUploadIntelligence">上传资质
            </el-button>
            <el-button class="mr5 zzBtn" size="small" @click="getCusZZList">
              <i class="iconfont orderIco" /> 客户资质
            </el-button>
          </div>
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="orderIntelligenceLikeword"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                v-loading="dataLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="dataLoading"
                element-loading-spinner="el-icon-loading"
                @click="searchIntelligence"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder">
          <el-table
            v-loading="dataLoading"
            :data="orderIntelligenceLists"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="certificationName"
              label="资质名称"
              min-width="110"
            />
            <el-table-column
              prop="certificationTypeName"
              label="资质类型"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="belongToSalesman"
              label="文件大小"
              min-width="90"
            >
              <template slot-scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadFileTime"
              label="上传日期"
              min-width="100"
            >
              <template slot-scope="{row}">
                {{ parseTime(row.uploadFileTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="90"
            />
            <el-table-column label="操作" width="70px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="previewCertificationFile(scope.row)">预览</li>
                        <li @click="editIntelligence(scope.row)">修改</li>
                      </ul>
                      <ul>
                        <li @click="downloadFile(scope.row)">下载资质</li>
                      </ul>
                      <ul>
                        <li @click="deleteFile(scope.row)">删除</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isOrderCusZhiZi=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 客户资质---dialog  -->
    <el-dialog
      title="客户资质"
      :visible.sync="isCusTableBox"
      :close-on-click-modal="false"
      append-to-body
      custom-class="bodyNoPadDialog bigDialog"
      width="71%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="cusBtnCon flex flex_end">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="intelligenceSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                v-loading="dataLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="dataLoading"
                element-loading-spinner="el-icon-loading"
                @click="getCusIntelligenceList"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder">
          <el-table
            v-loading="cusDataLoading"
            :data="intelligenceLists"
            border
            style="width: 100%"
            @selection-change="on_SelectSion"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="certificationName"
              label="资质名称"
              min-width="110"
            />
            <el-table-column
              prop="certificationTypeName"
              label="资质类型"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="fileSize"
              label="文件大小"
              min-width="90"
            >
              <template slot-scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="上传日期"
              min-width="100"
            >
              <template slot-scope="{row}">
                {{ parseTime(row.createDate,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="90"
            />
            <el-table-column label="操作" width="70px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="previewCertificationFile(scope.row)">预览</li>
                      </ul>
                      <ul>
                        <li @click="downloadFile(scope.row)">下载</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isCusTableBox=false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="confirmSelecd"
        >确定</el-button>
      </div>
    </el-dialog>
    <!-- 新建、修改资质   -->
    <el-dialog
      :title="ops==='add'?'新建资质':'修改资质'"
      :visible.sync="isAddIntelligence"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="intelligenceForm"
          :model="intelligenceForm"
          :rules="rules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="资质名称" prop="certificationName">
            <el-input v-model="intelligenceForm.certificationName" placeholder="请输入资质名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="资质类型" prop="certificationType">
            <el-select
                        filterable v-model="intelligenceForm.certificationType" placeholder="请选择" size="mini">
              <el-option label="订单资质" :value="1" />
              <el-option label="企业资质" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="资质文件" prop="originalFileName">
            <el-upload
              class="avatar-uploader"
              action=" "
              :show-file-list="false"
              :http-request="myUpload"
            >
              <div class="flex c_3F61F1"><i class="iconfont uploadIco mr5" /><span>上传文件</span></div>
            </el-upload>
          </el-form-item>
          <el-form-item label=" ">
            <div v-if="intelligenceForm.file.fileSize" class="thumbnailBox flexs">
              <div class="icoBox">
                <template v-if="intelligenceForm.file.fileType==='.pdf'">
                  <div class="fileIco f22"><i class="iconfont pdfIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.xls' || intelligenceForm.file.fileType==='.xlsx' || intelligenceForm.file.fileType==='.csv'"
                >
                  <div class="fileIco f22" style="background:#54a55b; "><i class="iconfont ecelIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.doc' || intelligenceForm.file.fileType==='.docx'"
                >
                  <div class="fileIco f22" style="background:#409EFF; "><i class="iconfont wordIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.ppt' || intelligenceForm.file.fileType==='.pptx'"
                >
                  <div class="fileIco f22"><i class="iconfont pptIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.zip' || intelligenceForm.file.fileType==='.rar'"
                >
                  <div class="fileIco f22"><i class="iconfont zipIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.jpg' || intelligenceForm.file.fileType==='.jpeg' ||
                    intelligenceForm.file.fileType==='.png' || intelligenceForm.file.fileType==='.bmp' || intelligenceForm.file.fileType==='.ico'"
                >
                  <div class="fileIco f22"><i class="iconfont imgIco f22" /></div>
                </template>
                <template v-else>
                  <div class="fileIco f22"><i class="iconfont otherFileIco f22" /></div>
                </template>
              </div>
              <div class="uploadTxt">
                <div class="f12 fw">{{ intelligenceForm.file.originalFileName }}</div>
                <div class="C_999aaa">{{ convertBytes(intelligenceForm.file.fileSize) }}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input
              v-model="intelligenceForm.certificationRemark"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddIntelligence=false">取 消</el-button>
        <el-button
          v-if="ops==='add'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addIntelligence"
        >保存</el-button>
        <el-button
          v-if="ops==='modify'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editSaveIntelligence"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatbytes, parseTime } from '@/utils'

export default {
  name: '',
  props: {
    customerCode: {
      type: String
    },
    orderNo: {
      type: String
    },
    isDisable: {
      type: Boolean
    }
  },
  data() {
    return {
      ops: 'add',
      addLableLoading: false,
      isCusTableBox: false, // 客户资质弹框是否打开
      isAddIntelligence: false, // 上传订单资质弹框是否打开
      dataLoading: false, // 表格数据加载中 效果
      cusDataLoading: false, // 客户资质表格数据加载中 效果
      isOrderCusZhiZi: false, // 客户资质弹框是否打开
      orderIntelligenceLists: [], // 订单客户资质数据列表
      orderIntelligenceSearchLists: [], // 订单客户资质数据搜索存储列表
      orderIntelligenceLikeword: '', // 订单客户资质关键字
      intelligenceLists: [], // 客户资质数据列表
      orderIntelligenceTotal: 0, // 订单客户资质条数
      selecteLists: [], // 客户资质选中列表
      intelligenceSearch: {
        customerCode: '',
        certificationType: 0,
        likeWords: ''
      }, // 客户资质搜索条件
      orderAndCusZz: {
        orderNo: '',
        certificationCodeList: []
      }, // 将客户资质与订单关联参数
      intelligenceForm: {
        orderNo: '',
        customerCode: '',
        certificationType: '',
        certificationName: '',
        certificationRemark: '',
        originalFileName: '',
        file: {
          fileType: '',
          fileSize: '',
          fileUrl: '',
          fileName: '',
          originalFileName: '',
          filePreview: ''
        }
      },
      lastFielUrl: '', // 对比文件是否改变
      rules: {
        certificationName: [
          { required: true, message: '资质名称必填', trigger: ['change', 'blur'] }
        ],
        certificationType: [
          { required: true, message: '请选择资质类型', trigger: 'change' }
        ],
        originalFileName: [
          { required: true, message: '请上传资质', trigger: 'change' }
        ]
      }
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    },
    // 客户资质点击事件
    getCusZZList() {
      this.isCusTableBox = true
    },
    // 确认选中客户资质
    confirmSelecd() {
      const arr = JSON.parse(JSON.stringify(this.selecteLists))
      this.orderAndCusZz.certificationCodeList = arr.map(item => item.certificationCode)
      this.orderAndCusZz.orderNo = this.orderNo
      const parmas = this.orderAndCusZz
      this.addLableLoading = true
      this.$api.business.OrdersCustomersCertificationMap(parmas).then(() => {
        this.getIntelligenceList()
        this.searchIntelligence()
        this.isCusTableBox = false
        this.addLableLoading = false
      }).catch(() => {
        this.addLableLoading = false
      })
    },
    // 得到选中客户资质
    on_SelectSion(val) {
      this.selecteLists = val
    },
    // 上传资质
    newUploadIntelligence() {
      this.isAddIntelligence = true
      this.ops = 'add'
    },
    // 修改资质保存
    editSaveIntelligence() {
      this.intelligenceForm.orderNo = this.orderNo
      // 判断文件是否改变
      if (this.lastFielUrl !== this.intelligenceForm.file.fileUrl) {
        this.intelligenceForm.fileIsChange = true
      } else {
        this.intelligenceForm.fileIsChange = false
      }
      const parmas = this.intelligenceForm
      this.$refs.intelligenceForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UpdateOrderCertification(parmas).then(() => {
            this.addLableLoading = false
            this.isAddIntelligence = false
            this.getIntelligenceList()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 新建客户资质保存
    addIntelligence() {
      this.intelligenceForm.customerCode = this.customerCode
      this.intelligenceForm.orderNo = this.orderNo
      const parmas = this.intelligenceForm
      this.$refs.intelligenceForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UploadOrderCertification(parmas).then(() => {
            this.addLableLoading = false
            this.isAddIntelligence = false
            this.getIntelligenceList()
            this.$message({
              message: '新建成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 上传资质
    myUpload(e) {
      const file = e.file
      // const type = file.name.substring(file.name.lastIndexOf('.') + 1)
      // const isLt2M = file.size / 1024 / 1024 < 2
      var formData = new FormData()
      formData.append('file', file)
      this.$api.common.UploadSingleFile(formData).then(res => {
        this.intelligenceForm.originalFileName = res.originalName
        this.$set(this.intelligenceForm.file, 'originalFileName', res.originalName)
        this.$set(this.intelligenceForm.file, 'fileSize', res.fileSize)
        this.$forceUpdate()
        this.intelligenceForm.file.fileType = res.fileExtension
        this.intelligenceForm.file.fileUrl = res.fileUrl
        this.intelligenceForm.file.fileName = res.fileName
        this.intelligenceForm.file.filePreview = ''
      })
    },
    // 修改客户资质点击事件
    editIntelligence(data) {
      this.ops = 'modify'
      const parmas = {
        orderNo: this.orderNo,
        certificationID: data.certificationID,
        fileID: data.file.fileID
      }
      this.$api.business.GetOneOrderCertification(parmas).then(res => {
        this.intelligenceForm = res
        this.intelligenceForm.file = {}
        this.intelligenceForm.file.fileType = res.fileType
        this.intelligenceForm.file.fileSize = res.fileSize
        this.intelligenceForm.file.fileUrl = res.fileUrl
        this.intelligenceForm.file.originalFileName = res.originalFileName
        this.intelligenceForm.file.fileName = res.fileName
        this.lastFielUrl = res.fileUrl
        this.intelligenceForm.file.filePreview = ''
      })
      this.isAddIntelligence = true
    },
    // 订单客户资质删除
    deleteFile(data) {
      const parmas = {
        orderNo: this.orderNo,
        certificationID: data.certificationID
      }
      this.$confirm('确定删除当前订单客户资质, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.DeleteOrderCertification(parmas).then(() => {
          this.getIntelligenceList()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 订单客户资源下载、客户资源下载
    downloadFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.DownLoadCertificationFile(parmas).then(res => {
        window.location.href = res
      })
    },
    // 订单客户资质预览、客户资质预览
    previewCertificationFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.PreviewCertificationFile(parmas).then(res => {
        window.open(res)
      })
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val)
    },
    // 按筛选条件筛选资质列表数据
    searchIntelligence() {
      const dataLists = JSON.parse(JSON.stringify(this.orderIntelligenceSearchLists))
      if (this.orderIntelligenceLikeword) {
        this.orderIntelligenceLists = dataLists.filter(m => {
          return m['certificationName'].indexOf(this.orderIntelligenceLikeword) !== -1
        })
      } else {
        this.orderIntelligenceLists = this.orderIntelligenceSearchLists
      }
    },
    // 得到订单资质条数
    getIntelligenceLisNum() {
      // if (!this.customerCode) {
      //   this.$message({
      //     message: '请先选择客户',
      //     type: 'warning'
      //   })
      //   return
      // }
      // 客户资质
      this.getCusIntelligenceListNum()
      const parmas = {
        orderNo: this.orderNo
      }
      this.dataLoading = true
      this.$api.business.QueryOrdersCustomersCertifications(parmas).then(res => {
        this.orderIntelligenceLists = res
        this.orderIntelligenceSearchLists = res
        this.orderIntelligenceTotal = res.length
        this.dataLoading = false
      }).catch(() => {
        this.dataLoading = false
      })
    },
    // 得到订单客户资质列表
    getIntelligenceList() {
      if (!this.customerCode) {
        this.$message({
          message: '请先选择客户',
          type: 'warning'
        })
        return
      }
      // 客户资质
      this.getCusIntelligenceList()
      const parmas = {
        orderNo: this.orderNo
      }
      this.dataLoading = true
      this.$api.business.QueryOrdersCustomersCertifications(parmas).then(res => {
        this.orderIntelligenceLists = res
        this.orderIntelligenceSearchLists = res
        this.orderIntelligenceTotal = res.length
        this.dataLoading = false
        this.isOrderCusZhiZi = true
      }).catch(() => {
        this.dataLoading = false
      })
    },
    // 得到客户资质列表条数
    getCusIntelligenceListNum() {
      this.intelligenceSearch.customerCode = this.customerCode
      const parmas = this.intelligenceSearch
      this.$api.business.QueryCustomersCertifications(parmas).then(res => {
        this.intelligenceLists = res
        this.cusDataLoading = false
      }).catch(() => {
        this.cusDataLoading = false
      })
    },
    // 得到客户资质列表
    getCusIntelligenceList() {
      this.intelligenceSearch.customerCode = this.customerCode
      const parmas = this.intelligenceSearch
      this.cusDataLoading = true
      this.$api.business.QueryCustomersCertifications(parmas).then(res => {
        this.intelligenceLists = res
        this.cusDataLoading = false
      }).catch(() => {
        this.cusDataLoading = false
      })
    },
    // 弹框关闭事件
    closeDialog() {
      if (this.$refs.intelligenceForm) {
        this.$refs.intelligenceForm.resetFields()
      }
      this.intelligenceForm = this.$options.data().intelligenceForm
    }
  }
}
</script>
<style lang="scss" scoped>
.cusBtnCon{
  padding: 7px 16px;
}
.zzBtn{
  padding: 8px 16px;
}
.buttonBox {
  .el-button--small {
    font-size: 14px;
    padding: 8px 16px;
  }
}
.thumbnailBox {
  background: #3f61f110;
  padding: 8px;

  .fileIco {
    color: #fff;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    background: #e13335;
  }

  .icoBox {
    height: 36px;
    width: 36px;
  }

  .uploadTxt {
    line-height: 18px;
    margin-left: 10px;
  }
}
</style>
